<template>
  <div class="schedule-calendar">
    <!-- 日历头部 -->
    <div class="calendar-header">
      <div class="month-navigation">
        <el-button 
          type="primary" 
          :icon="ArrowLeft" 
          @click="previousMonth"
          circle
        />
        <span class="current-month">{{ currentMonthText }}</span>
        <el-button 
          type="primary" 
          :icon="ArrowRight" 
          @click="nextMonth"
          circle
        />
      </div>
      <div class="calendar-actions">
        <el-button type="success" @click="goToToday">今天</el-button>
        <el-button type="primary" @click="showBatchCopyDialog">批量复制</el-button>
      </div>
    </div>

    <!-- 星期标题 -->
    <div class="weekdays-header">
      <div 
        v-for="day in weekdays" 
        :key="day"
        class="weekday-cell"
      >
        {{ day }}
      </div>
    </div>

    <!-- 日历主体 -->
    <div class="calendar-body">
      <div 
        v-for="week in calendarWeeks" 
        :key="week.weekKey"
        class="calendar-week"
      >
        <div 
          v-for="day in week.days" 
          :key="day.dateStr"
          class="calendar-day"
          :class="{
            'other-month': !day.isCurrentMonth,
            'today': day.isToday,
            'past-day': day.isPast,
            'has-schedule': day.schedules.length > 0,
            'selected': selectedDate === day.dateStr
          }"
          @click="selectDate(day)"
        >
          <div class="day-header">
            <span class="day-number">{{ day.dayNumber }}</span>
            <div class="day-status">
              <span v-if="day.schedules.length > 0" class="schedule-count">
                {{ day.schedules.length }}个排班
              </span>
              <span v-if="day.isPast && day.schedules.length > 0" class="history-indicator">
                历史
              </span>
            </div>
          </div>
          
          <!-- 排班预览 -->
          <div class="schedule-preview">
            <div 
              v-for="(schedule, index) in day.schedules.slice(0, 2)" 
              :key="schedule.id"
              class="schedule-item-mini"
              :class="{ 'disabled': schedule.status === 0 }"
            >
              {{ schedule.timeRange }}
            </div>
            <div 
              v-if="day.schedules.length > 2" 
              class="more-schedules"
            >
              +{{ day.schedules.length - 2 }}个
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选中日期的详细排班 -->
    <el-drawer
      v-model="drawerVisible"
      :title="`${selectedDateText} ${isSelectedDatePast ? '历史排班' : '排班详情'}`"
      direction="rtl"
      size="400px"
    >
      <div class="date-detail">
        <div class="date-detail-header">
          <div class="date-info">
            <h3>{{ selectedDateText }}</h3>
            <span class="day-of-week">{{ selectedDayOfWeek }}</span>
          </div>
          <div class="date-actions">
            <el-button 
              v-if="!isSelectedDatePast"
              type="primary" 
              size="small" 
              @click="addScheduleForDate"
            >
              添加排班
            </el-button>
            <el-dropdown v-if="!isSelectedDatePast" @command="handleDateAction">
              <el-button size="small">
                更多操作<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="copyFromTemplate">从模板复制</el-dropdown-item>
                  <el-dropdown-item command="clear" divided>清空排班</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-tag v-if="isSelectedDatePast" type="info" size="small">
              历史排班（只读）
            </el-tag>
          </div>
        </div>

        <div class="schedules-list">
          <div v-if="selectedDateSchedules.length === 0" class="empty-schedules">
            <el-empty :description="isSelectedDatePast ? '该日期无排班记录' : '暂无排班'" />
          </div>
          <div v-else>
            <div 
              v-for="schedule in selectedDateSchedules" 
              :key="schedule.id"
              class="schedule-item-detail"
              :class="{ 
                'disabled': schedule.status === 0,
                'history-item': isSelectedDatePast
              }"
            >
              <div class="schedule-time">
                {{ schedule.timeRange }}
                <div class="schedule-tags">
                  <el-tag v-if="schedule.isFromWeekly" type="warning" size="small" class="source-tag">
                    周模板
                  </el-tag>
                  <el-tag v-if="isSelectedDatePast" type="info" size="small" class="history-tag">
                    历史
                  </el-tag>
                </div>
              </div>
              <div class="schedule-info">
                <span class="appointments">{{ schedule.maxAppointments }}人</span>
                <el-tag 
                  :type="schedule.status === 1 ? 'success' : 'danger'" 
                  size="small"
                >
                  {{ schedule.statusName }}
                </el-tag>
              </div>
              <div class="schedule-actions">
                <el-button 
                  v-if="!isSelectedDatePast && !schedule.isFromWeekly"
                  size="small" 
                  type="primary" 
                  text 
                  @click="editSchedule(schedule)"
                >
                  编辑
                </el-button>
                <el-button 
                  v-if="!isSelectedDatePast && !schedule.isFromWeekly"
                  size="small" 
                  type="danger" 
                  text 
                  @click="deleteSchedule(schedule)"
                >
                  删除
                </el-button>
                <el-button 
                  v-if="!isSelectedDatePast && schedule.isFromWeekly"
                  size="small" 
                  type="warning" 
                  text 
                  @click="convertToDateSchedule(schedule)"
                >
                  转为日期排班
                </el-button>
                <el-tag v-if="isSelectedDatePast" type="info" size="small">
                  历史记录
                </el-tag>
                <el-tag v-if="!isSelectedDatePast && schedule.isFromWeekly" type="warning" size="small">
                  来自周模板
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 批量复制对话框 -->
    <el-dialog v-model="batchCopyDialogVisible" title="批量复制排班" width="500px">
      <el-form :model="batchCopyForm" label-width="100px">
        <el-form-item label="复制源">
          <el-radio-group v-model="batchCopyForm.sourceType">
            <el-radio label="template">周排班模板</el-radio>
            <el-radio label="date">指定日期</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item v-if="batchCopyForm.sourceType === 'template'" label="选择星期">
          <el-select v-model="batchCopyForm.sourceDayOfWeek" placeholder="请选择星期几">
            <el-option 
              v-for="(name, index) in dayNames" 
              :key="index + 1" 
              :label="name" 
              :value="index + 1"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="batchCopyForm.sourceType === 'date'" label="源日期">
          <el-date-picker
            v-model="batchCopyForm.sourceDate"
            type="date"
            placeholder="请选择源日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        
        <el-form-item label="目标日期">
          <el-date-picker
            v-model="batchCopyForm.targetDates"
            type="dates"
            placeholder="请选择目标日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="batchCopyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitBatchCopy">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import {
  getMyWorkScheduleDatesByDateRange,
  clearScheduleByDate,
  copyFromWeeklyTemplate
} from '@/api/workScheduleDate'
import {
  getMyWeeklySchedule
} from '@/api/workSchedule'

// Props
const props = defineProps({
  // 外部可以传入初始日期
  initialDate: {
    type: String,
    default: () => new Date().toISOString().split('T')[0]
  }
})

// Emits
const emit = defineEmits(['add-schedule', 'edit-schedule', 'delete-schedule'])

// 响应式数据
const currentDate = ref(new Date(props.initialDate))
const selectedDate = ref('')
const drawerVisible = ref(false)
const batchCopyDialogVisible = ref(false)
const dateSchedules = ref([])
const weeklySchedules = ref([])

// 星期几名称
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const dayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

// 批量复制表单
const batchCopyForm = reactive({
  sourceType: 'template',
  sourceDayOfWeek: null,
  sourceDate: null,
  targetDates: []
})

// 计算属性
const currentMonthText = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth() + 1
  return `${year}年${month}月`
})

const selectedDateText = computed(() => {
  if (!selectedDate.value) return ''
  const date = new Date(selectedDate.value)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}年${month}月${day}日`
})

const selectedDayOfWeek = computed(() => {
  if (!selectedDate.value) return ''
  const date = new Date(selectedDate.value)
  const dayOfWeek = date.getDay()
  return weekdays[dayOfWeek]
})

const isSelectedDatePast = computed(() => {
  if (!selectedDate.value) return false
  const selectedDateObj = new Date(selectedDate.value)
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return selectedDateObj < today
})

const selectedDateSchedules = computed(() => {
  if (!selectedDate.value) return []
  

  
  // 获取日期排班
  const dateSpecificSchedules = dateSchedules.value.filter(schedule => 
    schedule.scheduleDateStr === selectedDate.value
  )
  
  // 获取该日期对应的周排班模板
  const selectedDateObj = new Date(selectedDate.value)
  const dayOfWeek = selectedDateObj.getDay() // 0=Sunday, 1=Monday, ..., 6=Saturday
  const weeklyDayIndex = dayOfWeek === 0 ? 6 : dayOfWeek - 1 // 转换为 0=Monday, ..., 6=Sunday
  
  let weeklySchedulesForDay = []
  if (Array.isArray(weeklySchedules.value) && weeklySchedules.value.length > weeklyDayIndex) {
    weeklySchedulesForDay = weeklySchedules.value[weeklyDayIndex] || []
  }
  

  
  // 将周排班转换为日期排班格式
  const weeklyAsDateSchedules = weeklySchedulesForDay
    .filter(schedule => schedule && schedule.startHour !== undefined && schedule.endHour !== undefined)
    .map(schedule => ({
      ...schedule,
      id: `weekly-${schedule.id}-${selectedDate.value}`,
      scheduleDateStr: selectedDate.value,
      timeRange: `${schedule.startHour}:00-${schedule.endHour}:00`,
      statusName: schedule.status === 1 ? '启用' : '禁用',
      isFromWeekly: true
    }))
  
  // 合并并去重
  const uniqueSchedules = []
  const timeSlotMap = new Map()
  
  // 先添加日期排班
  dateSpecificSchedules.forEach(schedule => {
    const timeKey = `${schedule.startHour}-${schedule.endHour}`
    timeSlotMap.set(timeKey, schedule)
    uniqueSchedules.push(schedule)
  })
  
  // 再添加不冲突的周排班
  weeklyAsDateSchedules.forEach(schedule => {
    const timeKey = `${schedule.startHour}-${schedule.endHour}`
    if (!timeSlotMap.has(timeKey)) {
      uniqueSchedules.push(schedule)
    }
  })
  
  const result = uniqueSchedules.sort((a, b) => a.startHour - b.startHour)

  return result
})

// 生成日历数据
const calendarWeeks = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  
  // 获取当月第一天和最后一天
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  
  // 获取第一周的开始日期（周日开始）
  const startDate = new Date(firstDay)
  startDate.setDate(startDate.getDate() - firstDay.getDay())
  
  // 获取最后一周的结束日期
  const endDate = new Date(lastDay)
  endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()))
  
  const weeks = []
  const currentWeekStart = new Date(startDate)
  
  while (currentWeekStart <= endDate) {
    const weekKey = formatDate(new Date(currentWeekStart))
    const week = {
      weekKey,
      days: []
    }
    
    for (let i = 0; i < 7; i++) {
      const dayDate = new Date(currentWeekStart)
      dayDate.setDate(dayDate.getDate() + i)
      
      const dateStr = formatDate(dayDate)
      const isCurrentMonth = dayDate.getMonth() === month
      const isToday = dateStr === formatDate(new Date())
      const isPast = dayDate < new Date().setHours(0, 0, 0, 0)
      
      // 获取该日期的排班（合并日期排班和周排班模板）
      const dateSpecificSchedules = dateSchedules.value.filter(schedule => 
        schedule.scheduleDateStr === dateStr
      )
      
      // 获取该日期对应的周排班模板
      const dayOfWeek = dayDate.getDay() // 0=Sunday, 1=Monday, ..., 6=Saturday
      const weeklyDayIndex = dayOfWeek === 0 ? 6 : dayOfWeek - 1 // 转换为 0=Monday, ..., 6=Sunday
      
      let weeklySchedulesForDay = []
      if (Array.isArray(weeklySchedules.value) && weeklySchedules.value.length > weeklyDayIndex) {
        weeklySchedulesForDay = weeklySchedules.value[weeklyDayIndex] || []
      }
      
      // 将周排班转换为日期排班格式
      const weeklyAsDateSchedules = weeklySchedulesForDay
        .filter(schedule => schedule && schedule.startHour !== undefined && schedule.endHour !== undefined)
        .map(schedule => ({
          ...schedule,
          id: `weekly-${schedule.id}-${dateStr}`, // 避免ID冲突
          scheduleDateStr: dateStr,
          timeRange: `${schedule.startHour}:00-${schedule.endHour}:00`,
          statusName: schedule.status === 1 ? '启用' : '禁用',
          isFromWeekly: true // 标记来源于周排班
        }))
      
      // 合并两种排班，日期排班优先级更高
      const allSchedules = [...dateSpecificSchedules, ...weeklyAsDateSchedules]
      
      // 去重：如果同一时间段既有日期排班又有周排班，优先显示日期排班
      const uniqueSchedules = []
      const timeSlotMap = new Map()
      
      // 先添加日期排班
      dateSpecificSchedules.forEach(schedule => {
        const timeKey = `${schedule.startHour}-${schedule.endHour}`
        timeSlotMap.set(timeKey, schedule)
        uniqueSchedules.push(schedule)
      })
      
      // 再添加不冲突的周排班
      weeklyAsDateSchedules.forEach(schedule => {
        const timeKey = `${schedule.startHour}-${schedule.endHour}`
        if (!timeSlotMap.has(timeKey)) {
          uniqueSchedules.push(schedule)
        }
      })
      
      const daySchedules = uniqueSchedules
      
      week.days.push({
        dateStr,
        dayNumber: dayDate.getDate(),
        isCurrentMonth,
        isToday,
        isPast,
        schedules: daySchedules
      })
    }
    
    weeks.push(week)
    currentWeekStart.setDate(currentWeekStart.getDate() + 7)
  }
  
  return weeks
})

// 格式化日期为YYYY-MM-DD格式
const formatDate = (date) => {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}

// 方法
const previousMonth = () => {
  const newDate = new Date(currentDate.value)
  newDate.setMonth(newDate.getMonth() - 1)
  currentDate.value = newDate
}

const nextMonth = () => {
  const newDate = new Date(currentDate.value)
  newDate.setMonth(newDate.getMonth() + 1)
  currentDate.value = newDate
}

const goToToday = () => {
  const today = new Date()
  currentDate.value = today
  selectedDate.value = formatDate(today)
  drawerVisible.value = true
}

const selectDate = (day) => {
  selectedDate.value = day.dateStr
  drawerVisible.value = true
}

const addScheduleForDate = () => {
  emit('add-schedule', selectedDate.value)
}

const editSchedule = (schedule) => {
  emit('edit-schedule', schedule)
}

const deleteSchedule = (schedule) => {
  emit('delete-schedule', schedule)
}

const handleDateAction = async (command) => {
  if (command === 'copyFromTemplate') {
    try {
      const response = await copyFromWeeklyTemplate(selectedDate.value)
      if (response.code === 200) {
        ElMessage.success('从模板复制成功')
        loadDateSchedules()
      } else {
        ElMessage.error(response.message || '复制失败')
      }
    } catch (error) {
      console.error('从模板复制失败:', error)
      ElMessage.error('复制失败')
    }
  } else if (command === 'clear') {
    try {
      await ElMessageBox.confirm(
        `确定要清空 ${selectedDateText.value} 的所有排班吗？`,
        '确认清空',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      
      const response = await clearScheduleByDate(selectedDate.value)
      if (response.code === 200) {
        ElMessage.success('清空成功')
        loadDateSchedules()
      } else {
        ElMessage.error(response.message || '清空失败')
      }
    } catch (error) {
      if (error !== 'cancel') {
        console.error('清空排班失败:', error)
        ElMessage.error('清空失败')
      }
    }
  }
}

const showBatchCopyDialog = () => {
  batchCopyForm.sourceType = 'template'
  batchCopyForm.sourceDayOfWeek = null
  batchCopyForm.sourceDate = null
  batchCopyForm.targetDates = []
  batchCopyDialogVisible.value = true
}

const submitBatchCopy = () => {
  ElMessage.info('批量复制功能开发中...')
  batchCopyDialogVisible.value = false
}

const convertToDateSchedule = (schedule) => {
  // 将周模板排班转换为日期排班进行编辑
  const dateScheduleData = {
    scheduleDate: selectedDate.value,
    startHour: schedule.startHour,
    endHour: schedule.endHour,
    maxAppointments: schedule.maxAppointments,
    status: schedule.status,
    remark: schedule.remark || ''
  }
  
  emit('add-schedule', selectedDate.value, dateScheduleData)
}

// 加载周排班数据
const loadWeeklySchedules = async () => {
  try {
    const response = await getMyWeeklySchedule()
    if (response && response.code === 200) {
      weeklySchedules.value = response.data || []

    }
  } catch (error) {
    console.error('获取周排班数据失败:', error)
  }
}

// 加载日期排班数据
const loadDateSchedules = async () => {
  try {
    const year = currentDate.value.getFullYear()
    const month = currentDate.value.getMonth()
    
    // 获取当月的开始和结束日期，扩展到包含显示的所有日期
    const firstDay = new Date(year, month, 1)
    const lastDay = new Date(year, month + 1, 0)
    
    // 扩展到日历显示的完整范围
    const startDate = new Date(firstDay)
    startDate.setDate(startDate.getDate() - firstDay.getDay())
    
    const endDate = new Date(lastDay)
    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()))
    
    const startDateStr = startDate.toISOString().split('T')[0]
    const endDateStr = endDate.toISOString().split('T')[0]
    
    const response = await getMyWorkScheduleDatesByDateRange(startDateStr, endDateStr)
    if (response && response.code === 200) {
      // 处理数据，确保包含时间范围显示
      const schedules = response.data || []
      dateSchedules.value = schedules.map(schedule => ({
        ...schedule,
        timeRange: `${schedule.startHour}:00-${schedule.endHour}:00`,
        statusName: schedule.status === 1 ? '启用' : '禁用'
      }))
    }
  } catch (error) {
    console.error('获取日期排班数据失败:', error)
  }
}

// 监听当前月份变化，重新加载数据
watch(currentDate, () => {
  loadDateSchedules()
}, { immediate: true })

// 暴露方法给父组件
defineExpose({
  refreshData: () => {
    loadDateSchedules()
    loadWeeklySchedules()
  },
  selectDate: (date) => {
    selectedDate.value = date
    drawerVisible.value = true
  }
})

onMounted(() => {
  loadWeeklySchedules()
  loadDateSchedules()
})
</script>

<style scoped>
.schedule-calendar {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.month-navigation {
  display: flex;
  align-items: center;
  gap: 20px;
}

.current-month {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  min-width: 120px;
  text-align: center;
}

.calendar-actions {
  display: flex;
  gap: 10px;
}

.weekdays-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafafa;
  border-bottom: 1px solid #e4e7ed;
}

.weekday-cell {
  padding: 15px;
  text-align: center;
  font-weight: bold;
  color: #606266;
  border-right: 1px solid #e4e7ed;
}

.weekday-cell:last-child {
  border-right: none;
}

.calendar-body {
  min-height: 600px;
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #e4e7ed;
}

.calendar-week:last-child {
  border-bottom: none;
}

.calendar-day {
  min-height: 120px;
  padding: 8px;
  border-right: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.calendar-day:last-child {
  border-right: none;
}

.calendar-day:hover {
  background: #f0f9ff;
}

.calendar-day.other-month {
  background: #fafafa;
  color: #c0c4cc;
}

.calendar-day.today {
  background: #e1f3d8;
}

.calendar-day.past-day {
  background: #f9f9f9;
  opacity: 0.8;
  cursor: pointer;
}

.calendar-day.has-schedule {
  background: #f0f9ff;
}

.calendar-day.selected {
  background: #409eff;
  color: white;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.day-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.day-number {
  font-size: 16px;
  font-weight: bold;
}

.schedule-count {
  font-size: 12px;
  color: #409eff;
  background: #ecf5ff;
  padding: 2px 6px;
  border-radius: 10px;
}

.calendar-day.selected .schedule-count {
  color: white;
  background: rgba(255, 255, 255, 0.3);
}

.history-indicator {
  font-size: 10px;
  color: #909399;
  background: #f0f0f0;
  padding: 1px 4px;
  border-radius: 8px;
  line-height: 1.2;
}

.calendar-day.selected .history-indicator {
  color: white;
  background: rgba(255, 255, 255, 0.3);
}

.schedule-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-item-mini {
  font-size: 11px;
  padding: 2px 4px;
  background: #409eff;
  color: white;
  border-radius: 3px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item-mini.disabled {
  background: #c0c4cc;
}

.more-schedules {
  font-size: 10px;
  color: #909399;
  text-align: center;
  margin-top: 2px;
}

.date-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.date-detail-header {
  padding: 20px 0;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.date-info h3 {
  margin: 0 0 5px 0;
  color: #303133;
}

.day-of-week {
  color: #909399;
  font-size: 14px;
}

.date-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.schedules-list {
  flex: 1;
  overflow-y: auto;
}

.schedule-item-detail {
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.schedule-item-detail:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.schedule-item-detail.disabled {
  opacity: 0.6;
  background: #f5f7fa;
}

.schedule-item-detail.history-item {
  background: #fafbfc;
  border-color: #e1e6eb;
}

.schedule-item-detail.history-item:hover {
  border-color: #c0c4cc;
  box-shadow: 0 2px 8px rgba(192, 196, 204, 0.1);
}

.schedule-time {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-tags {
  display: flex;
  gap: 4px;
}

.history-tag,
.source-tag {
  margin-left: 8px;
}

.schedule-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.appointments {
  color: #606266;
  font-size: 14px;
}

.schedule-actions {
  display: flex;
  gap: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .calendar-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .calendar-day {
    min-height: 80px;
    padding: 4px;
  }
  
  .day-number {
    font-size: 14px;
  }
  
  .schedule-count {
    font-size: 10px;
  }
}
</style> 